/**
 * 标签页组件
 */
import React from 'react';
import { Steps, Button,message } from 'antd';
import { isEmpty } from '../common';

import { getUITabs } from '../uiConfig';
import UIIcon from './UIIcon';

const Step = Steps.Step;

export default class UIWizard extends React.Component {

    constructor(props) {
        super(props);

        let tabConfig = getUITabs(props.tabConfigId);

        this.state = {
            loading: false,
            stepDataStore: {},
            tabConfig: tabConfig,
            current: 0,
            canGoNext : props.canGoNext !== undefined ? props.canGoNext : true,
            canGoPrev : props.canGoPrev !== undefined ? props.canGoPrev : true,
            canFinish : props.canFinish !== undefined ? props.canFinish : true,
        };
    }

    getParent = () => {
        return this.props.parent;
    }

    next() {

        if(this.props.onWizardStepChange !== undefined){
            this.props.onWizardStepChange(this.state.tabConfig.tabPageList[this.state.current].name,this.currentWizardPanel);
        }

        const current = this.state.current + 1;

        this.setState({ current });

        setTimeout(() => {
            if(this.props.onInitWizardStep !== undefined){
                this.props.onInitWizardStep(this.state.tabConfig.tabPageList[this.state.current].name,this.currentWizardPanel);
            }
        });
      }

      finish() {
        const { stepDataStore } = this.state;
        if(this.props.onWizardFinish !== undefined){
            this.props.onWizardFinish(stepDataStore);
        }
      }
    
      prev() {
       
        if(this.props.onWizardStepChange !== undefined){
            this.props.onWizardStepChange(this.state.tabConfig.tabPageList[this.state.current].name,this.currentWizardPanel);
        }

        const current = this.state.current - 1;
        
        this.setState({ current });

        setTimeout(() => {
            if(this.props.onInitWizardStep !== undefined){
                this.props.onInitWizardStep(this.state.tabConfig.tabPageList[this.state.current].name,this.currentWizardPanel);
            }
        });
      }

      changeWizardState = (wizardState) => {
        if(wizardState !== undefined){
            
            this.setState(wizardState);
        }
      }

      render() {
        const { current,canGoNext,canGoPrev,canFinish,stepDataStore } = this.state;

        const tabContentMap = this.props.tabContentMap;

        const compentclassList = [];

        const wizardPanelList = this.state.tabConfig.tabPageList.map((tab) => {
            compentclassList.push(tab.compentclass);
            return (
                <Step title={<span>{isEmpty(tab.icon) === false ? <UIIcon icon={tab.icon} /> : ''}{tab.label}</span>} key={tab.name}>
                    
                </Step>
            );
        });

        this.currentWizardPanel = tabContentMap[compentclassList[current]].getComponent(this, {stepDataStore : stepDataStore,changeWizardState : this.changeWizardState});

        return (
          <div>
            <Steps current={current} progressDot={false} size="small">
              {wizardPanelList}
            </Steps>
            <div className="steps-content">{this.currentWizardPanel}</div>
            <div className="steps-action">
              {
                current < compentclassList.length - 1
                && <Button type="primary" disabled={canGoNext === false} onClick={() => this.next()}>下一步</Button>
              }
              {
                current === compentclassList.length - 1
                && <Button type="primary" disabled={canFinish === false}  onClick={() => this.finish()}>完成</Button>
              }
              {
                current > 0
                && (
                <Button style={{ marginLeft: 8 }} disabled={canGoPrev === false}  onClick={() => this.prev()}>
                  上一步
                </Button>
                )
              }
            </div>
          </div>
        );
      }
}
